<template>
  <el-container class="h-100">
    <el-header id="appheader" class="d-flex justify-content-between" :class="{'p-sticky': !isHome}">
      <!-- <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> -->
      <div class="appheader-logo">
        <img src="static/logo_index.png" alt="">
        <span class="ml-3">三调全流程监管系统</span>
        <!-- <span class="ml-3">全流程监管系统</span> -->
      </div>
      <div class="d-inline span" style="overflow: hidden;padding: 0 90px 0 80px;">
        <el-menu :default-active="activeIndex" ref="menu" class="home-header" mode="horizontal"
          @select="handleSelect" background-color="#1E88E5" text-color="#fff">
          <template v-for="menu in headers">
            <!-- 只有一个的菜单 -->
            <el-menu-item :index="menu.name" :key="menu.name">
              <img :src="menu.icon" alt="" v-if="menu.icon && menu.icon.length > 10">
              <span slot="title" v-if="!(menu.icon && menu.icon.length > 10)">{{menu.meta.title}}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </div>
      <div class="header-avatar float-right" v-show="islogin">
        <el-popover placement="bottom-end" trigger="hover" >
          <div>
            <h5>新通知 ({{msgPage.noread}})</h5>
            <ul class="list-group">
              <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" v-for="(item, index) in msgList"
                :key="index" style="border: none;cursor: pointer;" @click="readMsg(item)">
                <svg-icon icon-class="notice" class="mr-4" style="font-size: 25px;color: #FFD000;"></svg-icon>
                <div>
                  <p class="mt-0">{{item.title}}</p>
                  {{item.context}}
                </div>
                <span>{{$formatDateTime(item.receiveTime)}}</span>
              </li>
            </ul>
            <span class="ml-5">通知记录 ( {{msgPage.total}} ) </span>
            <el-divider></el-divider>
            <el-button type="text" class="float-right" @click="$router.push({name: 'msg'})">更多消息</el-button>
          </div>
          <el-badge :value="msgPage.noread" class="mr-5" slot="reference">
            <svg-icon icon-class="message" style="font-size: 25px;color: #FFFFFF;"></svg-icon>
          </el-badge>
        </el-popover>

        <el-dropdown @command="selected">
          <span>
            {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="退出登录">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    <el-main class="p-0 h-100">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="cacheNames">
          <router-view />
        </keep-alive>
      </transition>
    </el-main>
  </el-container>
  <!-- <div class='h-100'>
    页面底部
    <footer id="appfooter" class="bg-dark">
      <p class="text-center">
        Copyright © 技术支持: 陕西土豆数据科技有限公司
      </p>
    </footer>
  </div> -->
</template>
<script>
import { headerRouter } from '@/router/router'

export default {
  name: 'home',
  title: '首页',
  data() {
    let routers = this.filterPage(headerRouter)
    // this.$router.options.routes = routes;
    // this.$router.addRoutes(routers)
    // console.log('1111111111111', this.$router);
    return {
      activeIndex: this.$route.path.split('/')[1],
      headers: routers
    }
  },
  mounted() {
    if (window.performance) {
      var timeSincePageLoad = Math.round(performance.now())
      console.log('总计耗时：', timeSincePageLoad)
    }
    this.$store.dispatch('getMessage')
  },
  methods: {
    // 切换不同的内容
    handleSelect(key, keyPath) {
      if (!key) {
        this.$promptMsg()
      }
      if (key === '退出登录') {
        this.loginOut()
        return
      }
      this.$router.replace({ name: key, params: { page: key } })
    },
    // 去登录
    login() {
      this.$router.push({ name: 'login' })
    },
    // 去注册
    registe() {
      this.$router.push({ name: 'register' })
    },
    // 登录后点击用户中心
    selected(item) {
      if (item === '用户中心') {
        this.activeIndex = '';
        this.$promptMsg()
      } else if (item === '退出登录') {
        // 通知后台退出登录
        // axios.post('/mscs/user/logout', this.$paramsConvert({userName: this.$store.state.user.user.user.username}))
        this.$store.commit('loginOut')
        // 当用户点击退出登录时，判断用户是否在首页相关页面，不在则要回退首页
        this.$router.push({ name: 'login' })
        // if (!this.getRouterData(this.headers, this.$route.name)) {
        //   this.$router.push({name: this.headers[0].name})
        // }
      } else if (item === '修改密码') {
        this.$router.push({ name: 'modifypw' })
      }
    },
    // 激活的内容
    getIndex(to) {
      // let routerNames = to.path.split('/')
      // this.activeIndex  = to.matched.length >= 3  ? routerNames[2] : routerNames[1]
      this.activeIndex = this.$route.path.split('/')[1]
    },
    // 递归处理
    getRouterData(routes, name) {
      return routes.some((item) => {
        if (item.name === name) {
          return true
        }
        if (item.children && item.children.length > 0) {
          return this.getRouterData(item.children, name)
        }
      })
    },
    // 对顶部数据进行过滤，将不能使用的路由去掉
    // 要解决多级过滤问题，当有子元素，且子元素的所有都不满足时，就将父元素也过滤掉
    filterPage(routers) {
      let end = routers.filter(item => {
        if (item.children && item.children.length > 0) {
          let newChildren = this.filterPage(item.children)
          if (newChildren.length === 0 || !this.isUsed(item.meta && item.meta.permission)) {
            return false
          }
          item.children = newChildren
          return true
        }
        return this.isUsed(item.meta && item.meta.permission)
      })
      return end
    },
    // 当前登录用户是否可用
    isUsed(types) {
      // 没有传入可用的类型和可用类型数组没有元素，统一视为不设限制
      if (!types || types.length === 0) {
        return true
      }
      return types.some(item => parseInt(item) === parseInt(this.$store.getters.userType))
    },
    readMsg (msg) {
      this.$get('survey/message/toRead/' + msg.id).then(res => {
        this.$message({
          message: '已阅读一条消息',
          type: 'success'
        })
        this.$store.dispatch('getMessage')
      })
    }
  },
  watch: {
    '$route'(to, from) {
      this.getIndex(to)
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.getIndex(to)
    })
  },
  computed: {
    msgList() {
      return this.$store.state.message.message.data
    },
    msgPage() {
      return this.$store.state.message.message.pageInfo
    },
    cacheNames() {
      return this.$store.state.cacheRoute.cache
    },
    // 用户头像
    imgurl() {
      if (!this.$store.state.user.user) {
        return 'static/login.png'
      }
      let url = this.$store.state.user.user.userDetails ? this.$store.state.user.user.userDetails.profilePicture : null
      return url ? url : 'static/login.png'
    },
    // 是否登录
    islogin() {
      return this.$store.state.user.isLogin
    },
    // 是否在首页
    isHome() {
      return false
    },
    // 用户昵称
    name() {
      return this.$store.state.user.user ? this.$store.state.user.user.account || '用户昵称' : '用户昵称'
    }
  }
}
</script>
<style lang="scss">
#appheader {
  background: #1e88e5;
  .appheader-logo {
    line-height: 60px;
    color: #ffffff;
    font-size: 18px;
  }
}
.home-header .el-menu-item,
.home-header .el-submenu__title {
  border-bottom: none;
  font-size: 18px !important;
}
.home-header .is-active span {
  padding-bottom: 6px;
  // border-bottom: 2px solid #94C05A;
}

.home-header .el-menu-item.is-active,
.home-header .el-submenu.is-active .el-submenu__title {
  // color: #94C05A!important;
  // border-bottom: 0px!important;
  // border-bottom-color: transparent!important;
  color: #ffffff !important;
  background: #1976d2 !important;
  border-bottom: none;
}
.home-header .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
.el-menu--horizontal {
  border: none !important;
}
.el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #94c05a !important;
}
.nav-btn {
  height: 60px;
  > button {
    height: 100%;
    outline: none;
    background: none;
    border: none;
    color: #ffffff;
    width: 60px;
    font-size: 18px;
    cursor: pointer;
  }
}
/* 脚步处理样式 */
#appfooter {
  height: 70px;
  line-height: 1;
  font-size: 14px;
  color: #c0c0c0;
  padding-top: 30px;
}
#appfooter > div {
  padding: 40px 100px;
}
#appfooter > div > div:nth-child(1) {
  display: inline-block;
  width: 125px;
}

#appfooter > div > div:nth-child(2),
#appfooter > div > div:nth-child(4) {
  width: 1px;
  height: 85px;
  background-color: #c0c0c0;
  margin-top: 13px;
}
#appfooter > div > div:nth-child(3) {
  display: inline-block;
  width: 770px;
  padding-left: 50px;
  height: 100px;
}
#appfooter > div > div:nth-child(3) span {
  display: inline-block;
  padding: 8px 16px;
}
#appfooter > div > div:nth-child(5) {
  display: inline-block;
  width: 165px;
  padding-left: 60px;
}
#appfooter > div > div:nth-child(5) img {
  width: 100px;
  cursor: url(../../assets/big.png), auto;
  /* cursor: pointer; */
}
#appfooter > div > div:nth-child(5) p {
  text-align: center;
  margin-top: 25px;
}
#appfooter a {
  color: #c0c0c0;
  text-decoration: none;
}
#appfooter a:hover {
  color: #94c05a;
}
.header-avatar {
  outline: none;
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 16px;
}
.header-avatar img {
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
  /* margin-top: 10px; */
}
.header-avatar .el-dropdown {
  color: #ffffff;
  cursor: pointer;
}
.header-avatar .hear-notification {
  font-size: 20px;
  color: #ffffff;
  cursor: pointer;
}
</style>
